<template>
    <footer class="relative bg-[#2b2a32] footerWrap">
        <div class="footer maxWidth1400 flex justify-between">
            <div class="logo">
                <img src="/assets/image/logoH.png" alt="" />
            </div>
            <div class="right flex">
                <div class="footerNav flex">
                    <div class="footerNavList">
                        <div class="title">
                            <NuxtLink
                                :to="{
                                    path: '/about',
                                    query: { key: 'introduce' },
                                }"
                            >
                                {{ $t("common.text2") }}
                            </NuxtLink>
                        </div>
                        <div class="item">
                            <NuxtLink
                                :to="{
                                    path: '/about',
                                    query: { key: 'introduce' },
                                }"
                            >
                                {{ $t("common.text3") }}
                            </NuxtLink>
                        </div>
                        <div class="item">
                            <NuxtLink
                                :to="{
                                    path: '/about',
                                    query: { key: 'advantage' },
                                }"
                            >
                                {{ $t("common.text4") }}
                            </NuxtLink>
                        </div>
                        <div class="item">
                            <NuxtLink
                                :to="{
                                    path: '/about',
                                    query: { key: 'honor' },
                                }"
                            >
                                {{ $t("common.text5") }}
                            </NuxtLink>
                        </div>
                        <div class="item">
                            <NuxtLink
                                :to="{
                                    path: '/about',
                                    query: { key: 'history' },
                                }"
                            >
                                {{ $t("common.text6") }}
                            </NuxtLink>
                        </div>
                        <div class="item">
                            <NuxtLink
                                :to="{
                                    path: '/about',
                                    query: { key: 'global' },
                                }"
                            >
                                {{ $t("common.text7") }}
                            </NuxtLink>
                        </div>
                    </div>
                    <div class="footerNavList">
                        <div class="title">
                            <NuxtLink to="/news/group?key=group">
                                {{ $t("common.text8") }}
                            </NuxtLink>
                        </div>
                        <div class="item">
                            <NuxtLink to="/news/group?key=group">
                                {{ $t("common.text9") }}
                            </NuxtLink>
                        </div>
                        <div class="item">
                            <NuxtLink to="/news/industry?key=industry">
                                {{ $t("common.text10") }}
                            </NuxtLink>
                        </div>
                        <div class="item">
                            <NuxtLink to="/news/brand?key=brand">
                                {{ $t("common.text11") }}
                            </NuxtLink>
                        </div>
                    </div>
                    <div class="footerNavList">
                        <div class="title">
                            <NuxtLink to="/service/fund?key=fund">
                                {{ $t("common.text12") }}
                            </NuxtLink>
                        </div>
                        <div class="item">
                            <NuxtLink to="/service/fund?key=fund">
                                {{ $t("common.text13") }}
                            </NuxtLink>
                        </div>
                        <div class="item">
                            <NuxtLink to="/service/externalAsset?key=externalAsset">
                                {{ $t("common.text14") }}
                            </NuxtLink>
                        </div>
                        <div class="item">
                            <NuxtLink to="/service/familyTrust?key=familyTrust">
                                {{ $t("common.text15") }}
                            </NuxtLink>
                        </div>
                        <div class="item">
                            <NuxtLink to="/service/investConsult?key=investConsult">
                                {{ $t("common.text16") }}
                            </NuxtLink>
                        </div>
                    </div>
                    <div class="footerNavList">
                        <div class="title">
                            <NuxtLink to="/contact/recruitment?key=recruitment">
                                {{ $t("common.text17") }}
                            </NuxtLink>
                        </div>
                        <div class="item">
                            <NuxtLink to="/contact/recruitment?key=recruitment">
                                {{ $t("common.text18") }}
                            </NuxtLink>
                        </div>
                        <div class="item">
                            <NuxtLink to="/contact/contactUs?key=contactUs">
                                {{ $t("common.text19") }}
                            </NuxtLink>
                        </div>
                    </div>
                </div>
                <div class="constact">
                    <div class="label">{{ $t("footer.text1") }}</div>
                    <div class="tel">+65 63515056</div>
                    <div class="address text">{{ $t("footer.text2") }}</div>
                    <div class="postcode text">{{ $t("footer.text3") }}</div>
                </div>
            </div>
        </div>
    </footer>
    <div class="copyrightWrap bg-[#1a191f]">
        <div class="copyright flex">
            <p>
                <a
                    href="http://beian.miit.gov.cn/"
                    target="_blank"
                    ondragstart="return false"
                    >{{ $t("footer.text4") }}
                </a>
            </p>
            <p>{{ $t("footer.text5") }}</p>
            <p>
                <a href="" target="_blank" ondragstart="return false"
                    >Waterwood</a
                >
            </p>
        </div>
    </div>
</template>

<script setup>
import { arrayToTree } from "@/utils/tool.js";
const { locale } = useI18n();
const router = useRouter();
const state = reactive({
    menuList: [],
});
</script>

<style scoped>
.footerWrap {
    padding: 56px 0 48px;

    .footerNavList {
        margin-left: 40px;

        .title {
            margin-bottom: 10px;

            a {
                font-weight: bold;

                color: #fff;
                font-size: 16px;
            }
        }

        .item {
            max-width: 184px;
            padding: 10px 0;
            line-height: 1.24;

            a {
                font-size: 14px;
                color: #fff;

                &:hover {
                    color: var(--color-primary);
                }
            }
        }
    }
}

.footer {
    /* width: 1400px; */
    margin: 0 auto;
}

.footerWrap .constact {
    margin-left: 80px;
    max-width: 248px;

    .label {
        color: #ffd201;
        font-weight: bold;
        font-size: 14px;
    }

    .tel {
        font-size: 24px;
        color: #ffd201;
        font-weight: bold;
        margin: 10px 0;
        margin-bottom: 20px;
    }

    .text {
        color: #999;
        font-size: 14px;
        margin-top: 10px;
    }
}

.copyrightWrap {
    padding: 24px 0;

    .copyright {
        max-width: 1400px;
        margin: 0 auto;
        width: 84vw;

        p {
            margin-right: 15px;
            color: #999;
            font-size: 14px;

            a {
                color: #999;

                &:hover {
                    color: var(--color-primary);
                }
            }
        }
    }
}
</style>
